import { DatePicker, Form, Input, InputNumber, message, Select } from "antd"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_HeaderNormalComponent from "../headerNormal";
import { $echartsData, $eventBus, $EventBus_off, $EventBus_on, $headerOperationConditionData } from "../../../../../../common/utils";
import HomePage_ModalComponent_NormalFooterComponent from "../normalFooter";
import { useEffect, useState } from "react";
import HomePage_WarningThresholdFormComponent from "../../../warningThresholdForm";
import HomePage_ChannelCoefficientComponent from "../../../channelCoefficient";
import { $Http } from "../../../../../../network";
import dayjs from "dayjs"

// 主页-弹窗组件-编辑主变或线路弹窗组件
interface homePageModalComponentEditMainTransformerOrLineModalComponentInterface {
    sourceData: object
    change_cancel: Function
}

const HomePage_ModalComponent_EditMainTransformerOrLineModalComponent: React.FC<homePageModalComponentEditMainTransformerOrLineModalComponentInterface> = (props) => {
    const [form] = Form.useForm();


    const baseInfoList = props.sourceData["type"] === "主变" ? [
        {
            label: "巡维中心",
            key: "maintainCentre"
        },
        {
            label: "主变名称",
            key: "monitorMainName",
        },
        {
            label: "安装站点",
            key: "stationName"
        },
        {
            label: "电压等级",
            key: "volLevel",
            unit: "kV",
        },
    ] : [
        {
            label: "线路名称",
            key: "line",
        },
    ]

    const formItemList = props.sourceData["type"] === "主变" ? [
        {
            label: "生产厂家",
            key: "factory",
            type: "input",
            width: 272,
            placeholder: "请输入"
        },
        {
            label: "内部磁路系统结构",
            key: "systemStructure",
            type: "select",
            optionList: [
                {
                    label: "三相五柱式变压器",
                },
                {
                    label: "三相心式变压器",
                },
                {
                    label: "三相组式变压器",
                },
                {
                    label: "三相三柱式变压器",
                },
                {
                    label: "自耦变压器",
                },
            ],
            width: 162,
            placeholder: "请输入"
        },
        {
            label: "使用年限",
            key: "useLife",
            type: "inputNumber",
            step:1,
            precision:0,
            width: 110,
            placeholder: "请输入"
        },
        {
            label: "通信地址",
            key: "mailingAddress",
            type: "input",
            width: 272,
            placeholder: "请输入"
        },
        {
            ...$headerOperationConditionData["monitoringDevice"](true),
            width: 162,
            placeholder: "请选择"
        },
    ] : [
        {
            label: "线路长度（km）",
            key: "factory",
            type: "inputNumber",
            step:0.01,
            precision:2,
            placeholder: "请输入"
        },
        {
            label: "接地方式",
            key: "systemStructure",
            type: "select",
            optionList: [
                {
                    label: "三相五柱式变压器",
                },
                {
                    label: "三相心式变压器",
                },
                {
                    label: "三相组式变压器",
                },
                {
                    label: "三相三柱式变压器",
                },
                {
                    label: "自耦变压器",
                },
            ],
            placeholder: "请输入"
        },
        {
            label: "线路型号",
            key: "lineModel",
            type: "input",
            placeholder: "请输入"
        },
        {
            label: "建设日期",
            key: "buildDate",
            type: "datePicker",
            placeholder: "请输入"
        },
        {
            label: "通信地址",
            key: "mailingAddress",
            type: "input",
            placeholder: "请输入"
        },
        {
            ...$headerOperationConditionData["monitoringDevice"](true),
            placeholder: "请选择"
        },
    ]

    const change_warningThresholdForm = (data: object) => {
        $Http("edit", { typeName: `数据维护/${props.sourceData["type"]}维护`, ...props.sourceData, ...form.getFieldsValue(), ...data }).then((res) => {
            message.success(res["success"])
            props.change_cancel(true)
        })
    }
    // 广播函数数据
    const eventBusFuncData = {
        // // 提交操作
        // submitOperation: (data: object) => {
        //     console.log(warningThresholdFormData );

        // $Http("edit", { typeName: "数据维护/主变维护", ...props.sourceData, ...form.getFieldsValue(), ...warningThresholdFormData }).then((res) => {
        //     message.success(res["success"])
        //     props.change_cancel(true)
        // })

        // }
    }
    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    return (
        <div className={lessModule["homePageModalComponentEditMainTransformerOrLineModalComponent"]}>
            <HomePage_ModalComponent_HeaderNormalComponent name={`编辑${props.sourceData["type"]}`} padding="15px 24px" change_cancel={props.change_cancel} />
            <main className={lessModule["homePageModalComponentEditMainTransformerOrLineModalComponent-main"]}>
                <div className={lessModule["homePageModalComponentEditMainTransformerOrLineModalComponent-main__title"]}>基本信息</div>
                <div className={lessModule["homePageModalComponentEditMainTransformerOrLineModalComponent-main__baseInfo"]}>
                    {
                        baseInfoList.map((item, idx) => {
                            return (
                                <div key={`baseInfoItem${idx}`} className={lessModule["main-baseInfo__item"]}>
                                    <span className={lessModule["baseInfo-item__label"]}>{item["label"]}：</span>
                                    <span>{props.sourceData[item["key"]]}</span>
                                    {/* <span>{item?.["unit"]}</span> */}
                                </div>
                            )
                        })
                    }
                </div>
                <Form
                    className={lessModule["homePageModalComponentEditMainTransformerOrLineModalComponent-main__form"]}
                    layout="vertical"
                    form={form}
                    initialValues={{...props.sourceData,...props.sourceData["buildDate"] ? {buildDate : dayjs(props.sourceData["buildDate"])}:{}}}
                >
                    {
                        formItemList.map((item:object, idx:number) => {
                            return (
                                <Form.Item key={`formItem${idx}`} className={lessModule["main-form__item"]} style={{ width: item["width"] ?? "calc((100% - 21.5px) / 2)" }}
                                    label={`${item["label"]}`}
                                    name={item['key']}
                                    rules={[{ required: false, message: item["placeholder"] }]}
                                >
                                    {
                                        item["type"] === "select" && <Select showSearch
                                            placeholder={item["placeholder"]}
                                            options={item["optionList"]}
                                            fieldNames={{ value: "label" }}
                                        />
                                    }
                                    {
                                        item["type"] === "input" && <Input placeholder={item["placeholder"]} autoComplete="off" />
                                    }
                                    {
                                        item["type"] === "inputNumber" && <InputNumber placeholder={item["placeholder"]} min={0} step={item["step"] ?? undefined} precision={item["precision"] ?? undefined} autoComplete="off"/>
                                    }
                                                                                {
                                                item["type"] === "datePicker" && <DatePicker />
                                            }
                                </Form.Item>
                            )
                        })

                    }
                </Form>
                <HomePage_WarningThresholdFormComponent sourceData={props.sourceData} change_formData={change_warningThresholdForm} />
            </main>
            <HomePage_ModalComponent_NormalFooterComponent change_cancel={props.change_cancel} />
        </div>
    )
}
export default HomePage_ModalComponent_EditMainTransformerOrLineModalComponent